<template>
    <component is="a-modal" v-model:visible="visible" :hide-cancel="true" width="90%" :title="title"
        :mask-closable="false" @cancel="close" @ok="close">
        <a-row>
            <a-col>
                <a-button type="primary" style="margin-bottom: 20px;" @click="handleAdd">
                    <icon-plus />新增
                </a-button>
            </a-col>
        </a-row>
        <a-table :loading="loading" :pagination="false" :columns="columns" :data="tableData" :stripe="true"
            :scroll="{ y: '60vh' }">
            <template #type="{ record }">
                <div v-if="record.type == 'image'">
                    <a-image width="100px" height="60px" :src="record.data"></a-image>
                </div>
                <div v-if="record.type == 'video'">
                    <a v-if="record.data && record.data.includes('video')" :href="record.data?.replace(/\/manifest.*$/, '/watch')" target="_blank" style="color:#4c6ef5">视频预览</a>
                </div>
            </template>
            <template #operation="{ record }">
                <a-space>
                    <a-link type="primary" size="small" @click="editRow(record)">编辑</a-link>
                    <a-popconfirm
                        content="确定要刪除该数据吗?"
                        position="bottom"
                        @ok="deleteAction(record)">
                        <a-link type="primary" >
                            <icon-delete /> {{ '刪除' }}
                        </a-link>
                    </a-popconfirm>
                </a-space>
            </template>
        </a-table>
        <a-pagination class="pagination" @change="pageChange" @page-size-change="limitChange" :total="total"
            :show-total="true" :current="queryParams.page" :page-size="queryParams.limit" show-total show-jumper
            show-page-size />
        <sa-operation :show_google="operation.show_google" :visible="operation.visible" :id="operation.id"
            :api="operation.api" :pwdTxt="operation.pwdTxt" @cancel="operation.visible = false"
            @ok="refresh"></sa-operation>
        <edit-form ref="editRef" @success="getData"> </edit-form>
    </component>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import swiperApi from '@/api/message/swiper'
import editForm from './edit_content.vue'
import SaOperation from '@cps/sa-operation/index.vue'
const emit = defineEmits(['success'])
const visible = ref(false)
const   editRef=ref()
const switchLoading = ref(false)
import throttle from 'lodash/throttle'
import { Message } from '@arco-design/web-vue'
const loading = ref(false)
const title = ref('')
const type=ref('')
const searchForm = reactive({
    id: ''
})
const total = ref(0)
const queryParams = ref({
    page: 1,
    limit: 10,
})
const operation = ref({
    visible: false,
    id: null,
    api: '',
    pwdTxt: 'admin_pay_password',
    show_google: true
})
const open = async (data) => {
    console.log('```',data);
    type.value= data.type
    visible.value = true
    searchForm.id = data.id
    operation.value.id = data.id
    title.value = `廣告位內容`
    getData()
}
const columns = reactive([
    { title: 'ID', dataIndex: 'id', width: 100, align: 'center' },
    { title: '排序', dataIndex: 'sort', width: 100, align: 'center' },
    { title: '內容', slotName: 'type', width: 180, align: 'center' },
    { title: '标题', dataIndex: 'title', width: 150, ellipsis: true, tooltip: true },
    { title: '跳转地址', dataIndex: 'url', width: 180, ellipsis: true, tooltip: true, align: 'center' },
    { title: '创建时间', dataIndex: 'create_time', width: 180, align: 'center' },
    { title: '修改时间', dataIndex: 'update_time', width: 180, align: 'center' },
    { title: '操作', slotName: 'operation', width: 220, align: 'center', fixed: 'right' },
])
const handleAdd=()=>{
    editRef.value?.open('add',type.value,searchForm.id)
}
const editRow= (row)=>{
    editRef.value?.open('edit',type.value,searchForm.id,row.id)
    editRef.value?.setFormData(row)
}
const pageChange = (page) => {
    queryParams.value.page = page;
    getData()
};
const limitChange = (limit) => {
    queryParams.value.limit = limit;
    queryParams.value.page = 1
    getData()
};
const tableData = ref([])
const getData = async (id, params) => {
    loading.value = true
    const { data } = await swiperApi.swiperContent(searchForm.id, queryParams.value)
    tableData.value = data.data
    total.value = data.total
    loading.value = false
}
const deleteAction=async(record)=>{
    const {data} =await swiperApi.delContent({id:record.id})
    Message.success('刪除成功')
    getData()
}
const handleState = async (row) => {
    switchLoading.value = true
    try {
        const params = { id: row.id, state: row.state == 1 ? 0 : 1 }
        const { data } = await swiperApi.changeState(params)
        Message.success('修改成功')
        queryParams.value.page = 1
        switchLoading.value = false
        getData()
    } catch {
        switchLoading.value = false
    }

}
const close = () => (visible.value = false);
defineExpose({
    open
})
</script>
<style lang="less" scoped>
.pagination {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}
</style>